<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生实现Ajax-原理</title>
 <style type="text/css" media="screen">
 
 </style>
</head>

<body>

<script>

      //一. ajax(异步无刷新请求网页)原理-！！！注意服务器运行ajax
/*    1.实例化xhr异步对象  var xhr=new XMLHttpRequest()
     2.建立请求连接 xhr.open('get','url地址',true) //请求类型 get ,post 路径:url地址
     3.发送请求 xhr.send() 发送
     4.发送是否成功  xhr.onreadystatechange=function(){if(xhr.readyState==4){ //有没有发送成功: http请求状态 :0,1,2,3,4 
     	    if(xhr.status==200) //服务器响应状态: 200<=xhr.status<300||xhr.status=304 代表成功  
     	    {
     	    	//请求成功后做的事：响应内容
     	    	//console.log(xhr.responseText);
     	    }
     	    else
             {
                 //请求失败做的事:给你一个状态
                 // console.log(xhr.status);
             }

     }} */
      
    // 二.简单实现
       //1.创建XML对象
        var xhr=new XMLHttpRequest();
        //2.请求url
        xhr.open('get','abc.txt',true) //1.请求方式:get(一般用于查询不敏感数据等，请求的东西url地址会显示)与post(用于一些对数据敏感的地方,请求的东西url地址不会显示),默认get 2.url地址 3.异步请求(true)或同步请求(false),默认是异步请求
        //3.发送
        xhr.send()
        //4.发送是否成功,如果成功后台进行响应
        //前台请求状态事件onreadystatechange-
        xhr.onreadystatechange=function(){
             //4.1前台请求状态readyState :一共5个状态,0:初始化 1:连接上 2:已发送 3:请求处理中 4:请求成功
             if(xhr.readyState==4){
                  //4.2 后台服务器响应状态 status: 200<=xhr.status<300||xhr.status=304 代表成功 
                  if(xhr.status==200){
                      //4.3 请求响应成功后,后台返回内容 : xhr.responseText //输出请求文本内容  xhr.responseXML 请求xml文件时输出XML文件内容
                       console.log(xhr.responseText)
                  } 
                  else{  //如果报错,输出响应状态码
                      console.log(xhr.status)
                  }  
             }
        } 
       
    //  三.简单封装下
   /* function ajax(url, fnSucc, fnFaild) // url:哪个文件 ,fnSucc:读取成功调用
        {
            //1.创建Ajax对象
            var oAjax=null;
            
            if(window.XMLHttpRequest)
            {
                oAjax=new XMLHttpRequest();
            }
            else
            {
                oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //针对IE兼容写法
            }
            
            //2.连接服务器
            oAjax.open('GET', url, true);
            
            //3.发送请求
            oAjax.send();
            
            //4.接收服务器的返回
            oAjax.onreadystatechange=function ()
            {
                if(oAjax.readyState==4)	//完成
                {
                    if(oAjax.status==200)	//成功回调
                    {
                        fnSucc(oAjax.responseText);
                    }
                    else
                    {
                        if(fnFaild) //失败回调
                            fnFaild(oAjax.status);
                    }
                }
            };
        } 
   //调用ajax('url地址',成功方法,失败方法)
   ajax('abc.txt',function(data){
         console.log(data) //data后台数据
   },function(status){
       console.log(status) //status失败状态
   })   
   
    */

// 扩展阅读-ajax更多封装-https://www.cnblogs.com/webSong/p/7224546.html


</script>
</body>
</html>
